<template>
	<el-dialog :title="data.isEdit?'修改':'新增'" :visible.sync="data.dialogFormVisible" append-to-body width="580px" @open='open'>
	  <el-form :model="data.form">
		  <el-form-item label="分类:" :label-width="data.formLabelWidth">
		    <el-select v-model="data.form.region" placeholder="请选择活动区域">
		      <el-option :label="item.category_name" :value="item.id" v-for="item in data.categoryAry" :key='item.id'></el-option>
		    </el-select>
		  </el-form-item>
	    <el-form-item label="标题:" :label-width="data.formLabelWidth">
	      <el-input v-model="data.form.name" autocomplete="off"></el-input>
	    </el-form-item>
		<el-form-item label="概况:" :label-width="data.formLabelWidth">
		 <el-input
		   type="textarea"
		   :rows="2"
		   placeholder="请输入内容"
		   v-model="data.form.textarea">
		 </el-input>
		</el-form-item>
	  
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="close">取 消</el-button>
	    <el-button type="primary" @click="sure" :loading='data.isloading'>确 定</el-button>
	  </div>
	</el-dialog>
</template>

<script>
	
	import {
		reactive,
		ref,
		watch,
		watchEffect
	} from '@vue/composition-api';
	import {add,editInfo} from '@/api/news.js'
	export default {
		name:'info',
		props:{
			flag:{
				type:Boolean,
				default:false
			},
			category:{
				type:Array,
				default:()=>[]
			},
			eidtObj:{
				type:Object,
				default:()=>{}
			}
		},
		setup(props,{emit,root}){
			
			// data
			// const dialogFormVisible = ref(false)
			const data = reactive({
					formLabelWidth:'120px',
					form:{
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: '',
						textarea:''
					},
					categoryAry:[],
					dialogFormVisible:false,
					isloading:false,
					isEdit:false
				})
			// watch
			watchEffect(()=>{data.dialogFormVisible=props.flag})
			
			// methods
			const close = ()=>{
				data.dialogFormVisible = false
				emit('update:flag',false)
			}
			const open=()=>{
				
				data.categoryAry = props.category
				// 编辑数据 
				if(props.eidtObj.categoryId){
					data.form.name = props.eidtObj.title
					data.form.textarea = props.eidtObj.content
					data.form.region = props.eidtObj.categoryId
					data.form.id = props.eidtObj.id
					data.isEdit = true 
				}

			}
			const clear = ()=>{
				data.form.region = ''
				data.form.name=''
				data.form.textarea=''
			}
			const sure = ()=>{
				
				if(!data.form.name){
					return root.$message('标题不能为空')
				}
				const requestData= {
					categoryId: data.form.region,
					title: data.form.name,
					content: data.form.textarea
				}
				data.isloading = true 
				if(data.isEdit){
					requestData.id =  data.form.id
					editInfo(requestData).then(res=>{
						if(res.resCode===0){
							data.isloading = false
							// 关闭弹窗
							close()
							// 回调父级数据
							emit('getListEmit');
							//
							clear()
							return root.$message.success(data.isEdit ? '修改成功' :'添加成功')
						}
					}).catch(err=>{
						data.dialogFormVisible = false
					})
				}else {
					add(requestData).then(res=>{
						if(res.resCode===0){
							data.isloading = false
							// 关闭弹窗
							close()
							// 回调父级数据
							emit('getListEmit');
							//
							clear()
							return root.$message.success(data.isEdit ? '修改成功' :'添加成功')
						}
					}).catch(err=>{
						data.dialogFormVisible = false
					})
				}
			
			}
			
		
			return { 
				data,
				close,open,sure
			}
		}
	}
</script>

<style>
</style>
